<template>
	<view class="flex grid-gap-2">
		<view v-for="(item,index) in props.count" style="width: 16px;height: 16px;" :key="index" @tap="selected(item)">
			<slot>
				<image src="/static/icons/star-selected.png" v-if="value>=item" style="width: 16px;height: 16px;"></image>
				<image src="/static/icons/star-not-selected.png" v-else style="width: 16px;height: 16px;"></image>
			</slot>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watchEffect, defineProps } from 'vue';
const props = withDefaults(defineProps<{
	modelValue: number,
	count?: number
	ready?: boolean
}>(), {
	count: 5,
	ready: false
});
const emit = defineEmits(['update:modelValue']);
const showNum=ref(props.modelValue);
const value=ref(props.modelValue);
const selected=(num:number)=>{
	if(props.ready){
		return;
	}
	value.value=num;
	emit('update:modelValue',num);
}
</script>

<style lang="scss">

</style>